<template>
	<el-header style="text-align: center;font-size: 20px;font-weight: 600;display: unset">
		《{{ formTitle }}》<span style="margin-left: 20px;font-size: 14px">预览</span>
	</el-header>
	<el-row :gutter="20">
		<el-col :span="18" :offset="3">
			<el-config-provider :locale="elLocale">
				<div style="margin: 10px;text-align: -webkit-center;">
					<VFormRender ref="preForm" :preview-state="true"></VFormRender>
				</div>
			</el-config-provider>
		</el-col>
	</el-row>


</template>
<script>
import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
import enUSLang from 'element-plus/lib/locale/lang/en'
import VFormRender from "@/components/designer/form-render";

export default {
	name: 'Form Preview',
	components: {
		VFormRender,
	},
	data() {
		return {
			elLocaleMap: {
				'zh-cn': zhCNLang,
				'en': enUSLang,
			},
			formTitle: '',
			versionId: this.$route.query.versionId,
			formId: this.$route.query.formId,
			formJson: {formConfig: {}, widgetList: {}},
			formData: {}

		}
	},
	computed: {
		elLocale() {
			let curLocale = localStorage.getItem('APP_LANG') || 'zh-cn'
			return this.elLocaleMap[curLocale]
		},
	},
	mounted() {
		this.getBpmFormJsonByFormId();
	},
	methods: {
		async getBpmFormJsonByFormId() {
			var res;
			if (this.versionId) {
				res = await this.$API.bpm.bpmFormVersion.getBpmFormJsonByVersionId.get({versionId: this.versionId});
			} else {
				res = await this.$API.bpm.bpmForm.getBpmFormJsonByFormId.get({formId: this.formId});
			}
			if (res.code == 200) {
				if (this.versionId) {
					this.formTitle = res.data.title;
				}else
				{
					this.formTitle = res.data.formTitle;
				}
				var formConfig = {};
				if (res.data.formConfig) {
					formConfig = JSON.parse(res.data.formConfig);
				}
				var widgetList = [];
				if (res.data.widgetList) {
					widgetList = JSON.parse(res.data.widgetList);
				}
				var resFormJson = {
					formConfig: formConfig,
					widgetList: widgetList
				}
				this.$refs.preForm.setFormJson(resFormJson);
			}
		},
	}
}
</script>

<style lang="scss">
#app {
	height: 100%;
}
</style>
